<template>
	<view class="work-container">
		<!-- 自定义导航栏 -->
		<!-- <template>
			<JavaPage />
		</template> -->
		<uni-nav-bar :statusBar="true" :fixed="true" title="论坛">
		</uni-nav-bar>
		<!-- animation为右侧控件若为false则不显示搜索 -->
		<view class="search" @click="tiaoSearchpage">
			<u-search placeholder="请输入关键词搜索" :showAction="false"></u-search>
		</view>
		<!-- tag标签其中 transform表明当点击标签时候会有一个缩放的效果 -->
		<u-tabs :list="list1" @click="click" :activeStyle="{
		    color: '#303133',
		    fontWeight: 'bold',
		    transform: 'scale(1.05)'
		}"></u-tabs>
		<!-- 父组件引入子组件 -->
		<Recommend :postData=postData v-show="current1==0" />
		<PythonPage v-show="current1==4" />
		<JSpage v-show="current1==3" />
		<CPage v-show="current1==1" />
		<JavaPage v-show="current1==2" />
	</view>
</template>

<script setup>
	// import {
	// 	sendCode,
	// 	aa
	// } from '@/api/index.js'
	import {
		getToken
	} from '@/utils/auth' //导入token
	// import{Recommend} from'./components/Recommend/index.vue'
	//java模块
	import
	JavaPage
	from './components/JavaPage/index.vue'
	//推荐模块
	import
	Recommend
	from './components/Recommend/index.vue'
	//Python模块
	import
	PythonPage
	from './components/PythonPage/PythonPage.vue'
	//JS模块
	import
	JSpage
	from './components/JSpage/JSpage.vue'
	//C语言模块
	import
	CPage
	from './components/CPage/CPage.vue'
	//
	import {
		ref,
		onMounted
	} from "vue";
	//导入onLoad生命周期
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		listPost
	} from '@/api/tiezi/post'
	//监听用户下拉动作，一般用于下拉刷新
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 2000);
	})
	//滚动页面的第几页
	const pageCount = ref({
		pageNum: 1,
		pageSize: 4,
		total: 1,
		maxPage: 4
	});
	//接口数据
	const postList = ref([])
	//页面滚动到底部的事件,常用于下拉下一页数据
	onReachBottom(() => {
		// console.log(pageCount.value.pageNum, '组件的数据')
		pageList()
	})
	const pageList = (() => {
		listPost({
			pageNum: pageCount.value.pageNum,
			pageSize: pageCount.value.pageSize
		}).then((res) => {
			console.log(res.total, '913289')
			 // pageCount.value.maxPage = Math.ceil(res.total / pageCount.value.pageSize)
			if (pageCount.value.pageSize < res.total) {
				pageCount.value.pageNum =pageCount.value.pageNum+1
				pageCount.value.pageSize = pageCount.value.pageSize + pageCount.value.maxPage
			}
			// postData.value.push(res.rows)

			postData.value = res.rows
			//console.log(pageCount.value.pageNum++, '父组件的数据aaaa')
		})
	})

	const postData = ref([])
	//设置状态位
	const isTokenValid = ref(false);
	//页面加载
	onMounted(() => {
		pageList()
		const token = getToken();
		if (token) {
			isTokenValid.value = true
		} else {
			uni.showModal({
				title: '提示',
				content: '您尚未登录，请先登录！',
				showCancel: false,
				confirmText: '去登录',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login'
						})
					}
				}
			});
		}
	})
	//点击搜索框时候触发时间跳转到页面
	function tiaoSearchpage() {
		uni.navigateTo({
			url: '/pages/searchPage/searchPage'
		})
	}

	//初始化current
	const current1 = ref(0)

	//页面跳转
	const click = ((e) => {
		current1.value = e.index
	})
	const list1 = ref([{
			name: '推荐'
		},
		{
			name: 'C/C++'
		},
		{
			name: 'Java'
		},
		{
			name: 'JavaScript'
		},
		{
			name: 'Python'
		}
	])
	const current = ref(0);
	const swiperDotIndex = ref(0);
	//轮播图
	const data = ref([{
			image: '/static/images/banner/banner01.jpg'
		},
		{
			image: '/static/images/banner/banner02.jpg'
		},
		{
			image: '/static/images/banner/banner03.jpg'
		}
	]);

	function clickBannerItem(item) {
		console.info(item)
	};

	function changeSwiper(e) {
		current.value = e.detail.current
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.search {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		pointer-events: auto;

	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 410px) {
		.uni-swiper-dot-box {
			border-radius: 40rpx;
			width: 100%;
			margin: 0 auto;
			margin-top: 16rpx;
		}

		.image {
			width: 100%;
		}
	}

	.top-content {
		margin: 15rpx;
		background-color: #f1f1f1;
		border-radius: 15rpx;

		// background-color: red;
		.content-headImage {
			padding: 20rpx;

			.content-headImage-item {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.content-button {
					font-size: 28rpx;
					line-height: 50rpx;
					position: absolute;
					top: 0px;
					right: 0rpx;
					width: 140rpx;
					height: 50rpx;
				}
			}

			// .content-headImage-item view:nth-child(2) {
			// 		font-size: 30rpx;
			// 	}
			// }

			.content-headImage-item view:nth-child(2) {
				font-size: 30rpx;
			}

			.content-headImage-text view:nth-child(1) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.content-Image-item {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				image {
					border-radius: 10rpx;
					width: 300rpx;
					height: 300rpx;
				}
			}
		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			text-align: center;

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}

		.content-Image-item-icon view:nth-child(1) {
			display: flex;
			margin-left: 80rpx;

			view {
				margin-left: 5rpx;
			}
		}

		.content-Image-item-icon view:nth-child(2) {
			display: flex;
			margin-left: 100rpx;

			view {
				margin-left: 5rpx;
			}
		}

		.content-Image-item-icon view:nth-child(3) {
			// flex: 1;
			margin-left: 100rpx;
		}

		.content-Image-item-icon view:nth-child(4) {
			// flex: 1;
			margin-left: 100rpx;
		}
	}
</style>